<template>
  <div class="header">
    <div class="tip">
      您好！欢迎来到!
      欢迎回来
      [
      <router-link to="/">登录</router-link>]
      [
      <router-link to="/">注册</router-link>]
    </div>
    <div class="topNavs">
      <div>
        <div class="topLogo">
          <img :src="src" alt srcset />
        </div>
        <div class="topNav" :class="Navactive">
          <ul>
            <router-link
              :to="item.rout"
              tag="li"
              v-for="(item,index) of navLink" 
              :key="index" 
              :class="item.class"
              @click.native="clickNav(item.class)"
            >
              {{item.name}}
            </router-link>
          </ul>
        </div>
        <div class="topLog"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MainHeader",
  data() {
    return {
      Navactive:'home',
      src: "/static/image/logo.png",
      navLink: [
        {
          name: "首页",
          class:'home',
          rout:'/'
        },
        {
          name: "任务大厅",
          class: "task",
            rout:'task'
        },
        {
          name: "会员中心",
          class: "vip",
            rout:'vip'
        }
      ]
    };
  },
  methods: {
    clickNav (e){ 
      this.Navactive = e
    }
  }
};
</script>
<style scoped>
.header {
  font-size: 2rem;

}
.tip{
  max-width: 1140px;
  margin: 0 auto;
}
.tip {
  text-indent: 30px;
  padding: 10px;
}
.tip a {
  color: red;
}
.topNavs {
  background: white;
}
.topNavs > div {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topNav li {  
 
  box-sizing: border-box;
  color: rgb(48, 49, 51);
  cursor: pointer;
  display: block;
  float: left; 
  font-family: "Microsoft Yahei";
  font-size: 18px;
  height: 86px;
  line-height: 86px;
  padding: 0 20px;
  transition: all .3s;
 
}
div.topNav.home .home,div.topNav.task .task,div.topNav.vip .vip{
 border-bottom-color: rgb(64, 158, 255);
  border-bottom-style: solid;
  border-bottom-width: 2px;
}
 
.topNav li:hover{
  color:rgb(64, 158, 255);
}
.topLogo，topLog {
  flex: 1;
}
.topNav {
  flex: 2;
}
</style>